iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
3
Modern Web

初探Vue.js 30天系列 第 5

[Day 5] v-on 聽聽看DOM事件

  • 分享至 

  • xImage
  •  

v-on 介紹

在瀏覽網頁時會觸發很多事件 (events) 的發生,這些動作稱為JavaScript DOM Event
熟悉的Jquery會用.on( events [, selector ] [, data ], handler )去監聽並處理事件
而v-on也會監聽DOM事件,並在事件被觸發後,執行後續的項目。

v-on 縮寫

前一篇說v-bind有縮寫,v-on也不惶多讓!

縮寫前
<a v-on:click="myFunction()"></a>
縮寫
<a @click="myFunction()"></a>

事件修飾符 (Event Modifiers)

Vue 提供一些常用處理的修飾符,幫助處理了許多 DOM 裡面的事件傳遞機制,讓我們能專注於程式邏輯的開發!

修飾符語法:
v-on:事件.修飾符="function名稱"
E.G.
v-on:click.prevent="handleClick"

.stop : 停止觸發上層 DOM 元素事件(中止由內向外傳播),防止事件冒泡 [event.stopPropagation()]
.prevent : 避免瀏覽器預設行為 [event.preventDefault()]
.capture : 事件捕捉模式 (事件觸發會先經由DOM tree一路往子層到目標為止,之後再冒泡上去父層)
.self : 僅觸發自己範圍的事件,不包含子層
.once : 事件觸發一次

接著來用v-on監聽並處理click、change、keyup事件吧!

click事件

點擊按鈕顯示遞增後的數字

<div id="app">
  <input type="button" id="add" value="加一" @click="add()">
	點了幾次:{{ count }}
</div>
let app = new Vue({
    el: '#app',
    data: {
        count: 0
    },
    methods: {
        add() {
            this.count++
        }
    }
});

在按鈕設置click事件並監聽,在點擊按鈕後,會觸發執行add(),因此數值會遞增!
觸發監聽事件不一定要使用function(),可以放運算式~ [不過還是建議使用function()]

直接將運算式寫進click事件中

<div id="app">
  <input type="button" id="add" value="遞減" @click="count++">
	count:{{ count }}
</div>

change事件

使用下拉式選單,顯示選到哪個值

<div id="app">
    <select v-model="name" id="nameList" @change="changeName()">
        <option value="Peter">選項peter</option>
        <option value="Jack">選項jack</option>
        <option value="Mary">選項mary</option>
    </select>
    {{ text }}
</div>
let app = new Vue({
    el: '#app',
    data: {
        name: '',
        text: ''
    },
    methods: {
        changeName(){
            this.text = '姓名:' + this.name
        }
    }
});

在下拉選單設置change事件並監聽,當下拉式選單選擇改變時,會觸發執行changeName()

當我選擇 - 選項peter後,render的結果:
姓名:Peter

keyup事件

文字框按下enter後,顯示輸入的文字

<div id="app">
    <input type="text" v-model="text" @keyup="keySomething()">
</div>
let app = new Vue({
    el: '#app',
    data: {
        showText: ''
    },
    methods: {
        keySomething(event) {
          if(event.keyCode == 13){
            alert('輸入的文字為' + this.showText)
          }
        }
    }
});

在輸入框設置"按下鍵盤"後的事件並監聽,當我輸入文字觸發事件,會執行keySomething(),因此會得到alert訊息。

下一篇介紹v-model,一個結合v-bind與v-on的那個拉風指令,敬請觀看!

Resource
事件傳遞機制
v-on-事件監聽


上一篇
[Day 4] v-bind 資料屬性給我綁起來!
下一篇
[Day 6] v-model 雙向綁定-表單資料處理好幫手
系列文
初探Vue.js 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言